<template>
    <view class="album">
        <!-- 专辑背景 开始 -->
        <view class="album_bg">
            <image mode="widthFix" :src="album.cover"></image>
            <view class="album_info">
                <view class="album_name">{{album.name}}</view>
                <view class="album_btn">关注专辑</view>
            </view>
        </view>
        <!-- 专辑背景 结束 -->

        <!-- 专辑作者 开始 -->
        <view class="album_author">
            <veiw class="album_author_info">
                <image mode="widthFix" :src="album.user.avatar"></image>
                <view class="author_name">{{album.user.name}}</view>
            </veiw>
            <veiw class="album_author_desc">
                <text>{{album.desc}}</text>
            </veiw>
        </view>
        <!-- 专辑作者 结束 -->

        <!-- 列表开始 -->
        <view class="album_list">
            <view class="album_item" v-for="(item,index) in wallpaper" :key="item.id">
                <go-detail :list="wallpaper" :index="index">
                <image mode="aspectFill" :src="item.thumb+item.rule.replace('$<Height>',360)"></image>
                </go-detail>
            </view>
        </view>
        <!-- 列表结束 -->
    </view>
</template>

<script>
import goDetail from '@/components/goDetail'
    export default {
        data(){
            return{
                params:{
                    limit:30,
                    order:'new',
                    skip:0,
                    first:1, 
                },
                id:-1,
                album:{},
                wallpaper:[],
                hasMore:true
            }
        },
        onLoad(options){
            console.log(options)
            this.id=options.id
            this.getList()
        },
        // 页面加载 上拉加载下一页
        onReachBottom(){
            if(this.hasMore){
                this.params.first=0
                this.params.skip+=this.params.limit
                this.getList()
            }else{
                uni.showToast({
                    title:'没有更多数据了',
                    icon:'none'
                })
            }
        },
        components:{
            goDetail
        },
        methods:{
            getList(){
                this.request({
                    url:`http://157.122.54.189:9088/image/v1/wallpaper/album/${this.id}/wallpaper`,
                    data:this.params
                })
                .then(result=>{
                    console.log(result)
                    if(Object.keys(this.album).length===0){
                        this.album=result.res.album
                    }
                    if(result.res.wallpaper.length===0){
                        this.hasMore=false
                        uni.showToast({
                            title:'没有更多数据了',
                            icon:'none'
                        })
                        return;
                    }
                    
                    this.wallpaper=result.res.wallpaper
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
.album_bg{
    position: relative;
    image{
  
    }
    .album_info{
        position:absolute;
        width: 100%;
        left: 0;
        bottom: 0;
        display: flex;
        height: 80rpx;
        align-items: center;
        justify-content: space-between;
        color: #fff;
        padding: 0 15rpx;
        .album_name{
           font-size: 40rpx;
        }
        .album_btn{
            width: 152rpx;
            height: 60rpx;
            background-color: $color;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 10rpx;
        }
    }
}
.album_author{
    padding: 10rpx;
    .album_author_info{
        padding: 10rpx 0;
        display: flex;
        image{
            width: 50rpx;
        }
        .author_name{
            color: #000;
            margin-left: 15rpx;
        }
    }
}
.album_list{
    display: flex;
    flex-wrap: wrap;
    .album_item{
        width: 33.33%;
        border: 3rpx solid #fff;
        image{
            height: 160rpx;
        }
    }
}
</style>